<!--
 * @Author: Dorange.Wang
 * @Date: 2021-04-20 14:16:12
 * @LastEditors: wangming
 * @LastEditTime: 2022-02-10 10:28:04
 * @Description: file content
-->
<route>
{
  "meta":{
    "title":"统计报表",
    "showMenu":true,
    "serialNum": 60
  }
}
</route>

<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input
          v-model="queryData.fileName"
          placeholder="报表名称"
          clearable
          :maxlength="64"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="loadData">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-col>
      <el-col class="mt10">
        <el-button type="primary" @click="handleCreate">新建</el-button>
      </el-col>
    </el-row>
    <el-table
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column prop="preFileName" label="报表名称" />
      <el-table-column prop="reportDesc" label="报表描述" />
      <el-table-column prop="modifyDate" label="更新时间">
        <template slot-scope="scope">
          {{ scope.row.modifyDate | moment }}
        </template>
      </el-table-column>

      <el-table-column prop="actions" label="操作">
        <template slot-scope="scope">
          <template>
            <span class="table-actionItem"
              ><el-button type="text" @click="handleEdit(scope.row)"
                >编辑</el-button
              ></span
            >
            <span class="table-actionItem"
              ><el-button type="text" @click="handleDesign(scope.row)"
                >设计</el-button
              ></span
            >
            <span class="table-actionItem">
              <el-popconfirm
                title="确定要删除报表吗？"
                placement="top"
                @confirm="handleDelete(scope.row)"
              >
                <el-button class="link-danger" type="text" slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </span>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>

    <ReportForm ref="ReportForm" @ok="handleReportFormOk" />
  </div>
</template>

<script>
import { APP_UNIQUE } from "@/utils/const";
import { appUnique } from "@/utils/auth";
import {
  getHmureportPageList,
  deleteHmureport,
} from "@/apis/paas/HmUreportController.js";
import ReportForm from "./__components__/ReportForm";
import { getBasePath } from "@/config/api.config";
export default {
  name: "Report",
  components: { ReportForm },
  data() {
    return {
      loading: false,
      queryData: {},
      pageData: {
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [],
      total: 0,
    };
  },

  created() {
    this.loadData();
  },

  methods: {
    loadData() {
      getHmureportPageList({
        ...this.queryData,
        ...this.pageData,
      }).then((res) => {
        this.tableData = res.data;
        this.total = res.totalCount;
      });
    },

    handleReset() {
      this.queryData = {};
      this.loadData();
    },

    handleCreate() {
      this.$refs.ReportForm.addForm();
    },

    handleEdit(record) {
      this.$refs.ReportForm.editForm({
        ...record,
      });
    },

    handleDesign(record) {
      const { fileName } = record;
      const unique = "hm_" + appUnique;
      const path = getBasePath(
        `ureport/designer?_u=${fileName}&${APP_UNIQUE}=${unique}`
      );
      window.open(path);
    },

    handleReportFormOk(value) {
      if (value) {
        this.loadData();
        this.handleDesign({
          fileName: value,
        });
      } else {
        this.loadData();
      }
    },

    handleDelete(record) {
      deleteHmureport([record.id]).then((res) => {
        this.loadData();
        this.$message.success("操作成功");
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
